<template>
  <div class="card-box">
    <div class="card-label" v-show="showVideo && item.show">观看回放</div>
    <div class="card-img" >
      <img class="big-img" :class="{'img-filter':showEye && item.show}" :src="item.imgSrc" alt="">
      <img v-show="showEye && item.show" class="play" src="/images/icon_play_small.svg" alt="">
      <p  class="eye" v-show="showEye">
        <img  src="/images/icon_eye.svg" alt="">
        <span class="eye-span">{{item.num}}</span>
      </p>
    </div>
    <div class="card-text">
      <p :class="['title', titleClass,{'text-active':item.show}]">
        <img v-if="showVideo" :src="item.show?'/images/icon_video_hover.svg':'/images/icon_video_def.svg'" alt=""> {{item.title}}
      </p>
      <p v-if="item.info" class="info clamp2-ellipsis">
        {{item.info}}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoCard',
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    showVideo: {
      type: Boolean,
      default: false
    },
    showEye: {
      type: Boolean,
      default: false
    },
    titleClass: {
      type: String,
      default: 'ellipsis'
    }
  }
}
</script>

<style scoped lang="less">
  .card-box {
    cursor: pointer;
    margin-left: 20px;
    float: left;
    overflow: hidden;
    position: relative;
    .card-img {
      width: 100%;
      position: relative;
      .eye{
        position: absolute;
        bottom: 3px;
        left: 12px;
      }
      .eye-span{
        color:#fff;
        margin-left:5px
      }
      .play{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      .big-img {
        width: 100%;
        height: 100%;
      }
    }
    .card-label{
      position: absolute;
      top: 12px;
      right: 12px;
      padding: 4px 8px;
      opacity: 0.5;
      background: #000000;
      border-radius: 2px;
      color: #fff;
      font-size: 12px;
      z-index:100;
    }
    .card-text {
      background: #F5F6F7;
      box-sizing: border-box;
      padding-left: 12px;
      padding-right: 12px;

      .title {
        color: #1F2329;
      }
      .text-active{
        color: #FF6B51;
      }
      .info {
        color: #646A73;
      }
    }
    .img-filter{
      filter:  opacity(60%);
    }
  }
</style>
